<template>
	<view class="homeindex" :style="'background-image: url(' + homeindex_bg+ ')'">
		<back class="back" :extraData="extraData"></back>
		<view class="tiptop" :style="{marginTop:customTop}">

			<music v-if="music_url" :music_url="music_url" class="left"></music>
			<view v-else class="left"></view>
			<view class="right" @click="tsfn1">提示
			</view>
		</view>
		<view class="title flexcenter">
			<image :src="`${imgPath}/upload/we/scratchcard/title.png`" alt="" class="titleimg"></image>
		</view>
		<!-- 模板1 -->
		<view class="full_w luckbox" :style="{backgroundImage: `${imgPath}/upload/we/turntable17/bottom_bg.png`}">

			<scratch-card v-if="!homeTip&showCanvas" ref="card" @startCallback="startCallback" @complete="endCallback"
				:title="title" watermark="1" :ismove="ismove" :disabled="disabled">
				<!-- <div class="prize_content">
					<div class="result_text flexcenter f50">中奖了</div>
				</div> -->
				<view class="prize_content" v-if="drawType == 1">

					<view class="result_text flexcenter f50" v-if="type == 1">中奖了</view>
					<view class="result_text flexcenter f50" v-else-if="type == 2">什么都没刮到呢</view>
					<view class="result_text flexcenter f50" v-else>{{taskText}}</view>

				</view>
				<view class="prize_content" v-else>
					<view class="result_text flexcenter f50" v-if="code">{{ code }}</view>
					<view class="result_text flexcenter f50" v-else>{{taskText}}</view>
				</view>
				<!-- 刮刮后将显示的内容 -->
				<!-- 	<view class="prize_content">
					<view class="flex ct">
						<view class="bold red fz50">
							45号
						</view>
					</view>


				</view> -->

				<button style="height:0;overflow: hidden;" class="btn mt30" @tap="reset">重置</button>

			</scratch-card>
			<!-- <img class="bottom_bg" src="@/assets/images/turntable17/bottom_bg.png" alt="" /> -->
		</view>
		<!-- <div class="flexcenter"><img src="@/assets/images/turntable2/dash.png" class="dashimg" alt=""></div> -->
		<view class="tipbottom">

			<view class="infodraw" @click="lwfn">
				<image :src="`${imgPath}/upload/we/turntable17/gift.png`"></image>
			</view>
			<view class="infocomplain c_fff f16">
				<p name="warning-o" class="mr_5" @click="tousufn" />客服{{type}}
			</view>



		</view>
		<uni-popup class="help_popup" ref="turnPopup" type="center" @change="onPopupClose">

			<DrawSuccess v-if="type==1" :drawitem='drawitem' @close='closePop' />
			<DrawFail v-if="type==2" @close='closePop' />
			<DrawZf v-if="type==3" @close='closePop' />
			<DrawGg v-if="type==4" :advert='advert' @close='closePop' />

			<!-- 定时抽奖 -->
			<!-- <victorydelayed v-if="type==5" :code="code" @close='closePop' /> -->
			<victorydelayed v-if="type==5" :code="code" @close='closePop' />

		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import music from '../music.vue'
	import DrawFail from '../type/DrawFail.vue'
	import DrawSuccess from '../type/DrawSuccess.vue'
	import DrawGg from '../type/DrawGg.vue'
	import DrawZf from '../type/DrawZf.vue'
	import victorydelayed from '../type/VictoryDelayed.vue'
	import back from '../back.vue' //顶部
	export default {
		props: ["extraData", "music_url"],
		data() {
			return {
				showCanvas: true,
				customTop: 0,
				disabled: false,
				url: "",
				taskText: "",
				play: false,
				ismove: false,
				drawType: 1,
				type: "",
				show_reweima: false,
				title: "",
				drawitem: null, //中奖
				advert: null, //广告参数
				code: null,
				prizes: [],
				show: false,
				imgPath: uni.$http.baseUrl,
				homeindex_bg: `${uni.$http.baseUrl}/upload/we/scratchcard/bg.png`,
				background: "",
				blocks: [{
					padding: "100rpx",
					imgs: [{

						src: `${uni.$http.baseUrl}/upload/we/turntable17/turnimg.png`,
						width: "100%",
						rotate: true,
					}, ],
				}, ],


				buttons: [{
						radius: "15%",
						background: "#617df2"
					},
					{
						radius: "10%",
						background: "#afc8ff"
					},
					{
						imgs: [{
							src: `${uni.$http.baseUrl}/upload/we/turntable17/btn.png`,
							top: "-80rpx",
							width: "140rpx",
							//   height: "6rem",
						}, ],
					},
				],
				// 默认配置
				defaultConfig: {
					// gutter: "2px",
				},
				defaultStyle: {
					// background: "#FFFBD5",
					fontSize: "30rpx",
					fontColor: "#000",
					lineClamp: 1,
				},
			};
		},
		computed: {

			...mapState({
				homeTip: state => state.app.homeTip,
			})
		},
		components: {
			music,
			DrawFail,
			DrawSuccess,
			DrawGg,
			DrawZf,
			victorydelayed,
			back

		},
		mounted() {
			this.url = uni.setStorageSync('url', this.url, 'session');
			this.customTop = (Number(uni.getStorageSync('customTop', 'session')) + 10) + "px";
			// this.$refs.turnPopup.open();
			// this.type = 1;
		},
		created() {
			let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
			this.drawType = task.type;


		},
		methods: {
			onPopupClose() {
				console.log("onPopupClose")
				this.showCanvas = true;
			},
			reset: function() { //重置大转盘
				console.log("reset")
				this.type = "";
				this.taskText = "";
				this.$refs.card.init();
			},

			seatShow: function() {
				uni.showToast({
					title: '成功',
					icon: 'success'
				});
			},
			closePop() {
				this.$refs.turnPopup.close();
				this.showCanvas = true;
				this.reset();
			},
			async startCallback() {
				console.log('开始点击turnPopup')
				console.log(this.disabled)
				// if (this.disabled) {
				// 	uni.showToast({
				// 		title: this.title,
				// 		icon: "error"
				// 	})
				// 	this.reset();
				// 	return
				// }

				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				try {
					// let res = await getDraw({
					// 	id: task.id
					// })
					var res = await uni.$http.post("/wxuser/draw/run", { //抽奖
						id: task.id
					})
					this.ismove = true;
					res = res.data

					if (res.code == 0) {
						this.title = res.msg;
						this.taskText = "做任务赢次数";
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
						this.disabled = true;
						this.reset();
						return
					}

					let data = res.data,
						index = 0;
					console.log("datadatadata", res)
					this.taskText = "做任务赢次数";
					if (data.type) {
						this.type = data.type
						this.advert = data.advert
					} else {
						if (data.list) {
							if (data.list.code) {
								this.type = 5
								this.code = data.list.code
							} else {
								this.type = 1
								if (data.list.level || data.list.level == 0) {
									index = data.list.level
								} else {
									index = this.prizes.length - 1
								}
							}
							this.drawitem = data.list
						} else {
							this.type = 2
						}

					}
				} catch (error) {
					console.log('测试测')
					setTimeout(() => {
						// 回到初始状态
						//	this.$refs.myLucky.init();
					}, 3000);
				}
			},

			endCallback(prize) {
				console.log("endendendendend")
				console.log("type", this.type);

				this.taskText = "什么都没挂到";
				this.disabled = false;
				this.$refs.card.firstTouch = true;
				this.$refs.card.init();

				this.show = true
				if (this.type != "") {
					this.$refs.turnPopup.open();
					this.showCanvas = false;
				} else {
					this.showCanvas = true;
				}

			},

			tousufn() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc49fd496002f64760'
					},
					corpId: 'ww26c801ce25ace1c6',
					success(res) {

					},
					fail(res) {

					},
				})
			},
			// tousufn(){ myLucky
			//   if(localStorage.getItem('erweimatext')==1){
			//     this.show_reweima=true
			//     return
			//   }
			//   window.location.href = "https://work.weixin.qq.com/kfid/kfc49fd496002f64760";
			// },
			lwfn() {
				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				let url = '/pagesPrize/aboutPrize/information?id=' + task.id + '&index=1'
				uni.navigateTo({
					url
				})
			},
			tsfn1() {

				let task = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task;
				let url = "/pagesPrize/aboutPrize/information?id=" + task.id
				uni.navigateTo({
					url
				})

			},
			// commsetting() {
			//   let setting = JSON.parse(sessionStorage.getItem("taskInfo")).setting;
			//   if (setting.bg_url) {
			//     this.background = this.domain + setting.bg_url;
			//   }
			//   if (setting.biaoti_url) {
			//     this.titltbg = this.domain + setting.biaoti_url;
			//   }
			// },
			// 设置奖项
			setDraw() {
				let info = JSON.parse(uni.getStorageSync('taskInfo', 'session'));

				let draw = info.draw;
				let draws = [{
					background: '#FF8400',
					fonts: [{
						text: "谢谢参与",
						top: "90rpx"
					}],
					imgs: [{
						src: `${uni.$http.baseUrl}/upload/we/turntable17/xxcy.png`,
						width: "80rpx",
						height: "80rpx",
						top: "12rpx",
					}, ],
					level: 0,
				}, ];
				draw.forEach((item, index) => {
					let params = {
						background: index % 2 == 0 ? '#FED893' : '#FF8400',
						fonts: [{
							text: item.draw_name,
							top: "90rpx"
						}],
						imgs: [],
						...item,
					};
					if (item.photo) {
						let imgparams = {
							width: "80rpx",
							height: "80rpx",
							top: "12rpx"
						};
						imgparams.src = this.domain + item.photo;
						params.imgs.push(imgparams);
						params.fonts[0].top = "90rpx";
					}
					draws.push(params);
				});
				// 安慰奖
				if (info.comfort.status == 1) {
					let params = {
						background: draws.length % 2 == 0 ? '#FED893' : '#FF8400',
						fonts: [{
							text: info.comfort.draw_name,
							top: "22rpx"
						}],
						imgs: [],
						...info.comfort,
					};
					if (info.comfort.photo) {
						let imgparams = {
							width: "100rpx",
							height: "100rpx",
							top: "22rpx"
						};
						imgparams.src = `${uni.$http.baseUrl}/info.comfort.photo`;
						params.imgs.push(imgparams);
						params.fonts[0].top = "22rpx";
					}
					draws.push(params);
				}
				this.prizes = draws;
				console.log("prize:", this.prizes);
			},


		},
	};
</script>

<style lang="scss" scoped>
	.homeindex {
		width: 100vw;
		height: 94vh;
		overflow: hidden;
		background-repeat: no-repeat;
		background-size: cover;

		.help_popup {
			z-index: 9999;
			position: relative;
		}

		.back {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
		}


		.popup_erweima_box {
			width: 300rpx;
			height: 300rpx;

			.box1 {
				width: 100%;
				height: 100%;
			}
		}

	}

	.title {
		margin-top: 40rpx;
		height: 160rpx;
		margin-bottom: 40rpx;
	}

	.titleimg {
		width: 80%;
		max-height: 180rpx;
	}

	.luckbox {
		height: 660rpx;
		overflow: hidden;
		position: relative;
		background-size: contain;
		/* 控制背景图像的大小，使其完全包含在元素内 */
		background-position: center bottom;
		/* 将背景图像在元素的底部居中 */
		background-repeat: no-repeat;


		.prize_content {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;


			.result_text {
				text-align: center;
				margin-top: 120rpx;
				font-size: 64rpx;
			}
		}

		/* 防止背景图像重复 */
		.bottom_bg {
			position: absolute;
			bottom: 0;
			z-index: 0;
			left: 1%;
			transform: translate(0, -1%);
			width: 98%;
		}
	}

	.luckbg {
		// background-color: #e52037;
		border-radius: 100%;
		overflow: visible !important;
		z-index: 1;
		position: relative;
	}

	.popupbg {
		width: 100%;
		background-color: transparent;
	}

	.tiptop {
		display: flex;
		margin: 150rpx 0rpx 0 20rpx;
		justify-content: space-between;
		color: #fff;

		.left {
			image {
				width: 60rpx;
				height: 60rpx;


				&.play {
					animation: music 4s infinite linear;
				}
			}

		}

		.right {
			background: #911100;
			border-radius: 40rpx 0 0 40rpx;
			width: 160rpx;
			height: 60rpx;
			border-right: 0;
			line-height: 60rpx;
			color: #FED11A;
			text-align: center;
			font-size: 28rpx;
		}

	}

	.tipbtn {
		width: 1.81rem;
		height: 0.75rem;
		background: #911100;
		border-radius: 0.33rem 0px 0px 0.33rem;
		width: 1.81rem;
		height: 0.75rem;
		// border: 2px solid #000000;
		border-right: 0;
		line-height: 0.75rem;

		color: #FED11A;
	}

	.po_bottom {
		position: absolute;
		right: 0.534rem;
		bottom: 1.1rem;
	}

	.gift {
		width: 1.386rem;
		height: 1.386rem;
		margin-bottom: 30px;
	}

	.tips2 {
		width: 0.85rem;
		height: 0.85rem;
	}

	.infodraw {
		position: absolute;
		right: 20rpx;
		bottom: 100rpx;
		width: 100rpx;
		height: 100rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.infocomplain {
		position: absolute;
		left: 0.267rem;
		bottom: 130rpx;
	}

	.dashimg {
		height: 180px;
		margin-top: -70px;
	}
</style>